<!--
 * @Description: 使用 https://www.swiper.com.cn/demo/index.html#virtual-slides
 * API: https://www.swiper.com.cn/api/virtual/374.html
 * vue 使用: https://swiperjs.com/vue
 * @Version: 0.0.1
 * @Autor: zhj1214
 * @Date: 2024-02-07 10:07:39
 * @LastEditors: zhj1214
 * @LastEditTime: 2024-10-22 10:26:19
-->
<template>
  <div class="swiper-virtual boxSwipe">
    <ClientOnly>
      <swiper
        :slides-per-view="3"
        space-between="10"
        :speed="300"
        @init="initSwiper"
        @slideChange="onSlideChange"
      >
        <swiper-slide
          v-for="(Item, index) in boxList"
          :key="index"
          :virtualIndex="index"
        >
          <!-- 0:待解锁 1:已开箱 2:待开箱 -->
          <div
            class="swiper-slide box-swipe-item items-center"
            :class="{
              'box-swipe-item-end': activityEnd,
            }"
          >
            <div class="box-swipe-item-box">
              <!-- 背景 -->
              <img
                class="box-swipe-item-bg"
                :class="{
                  'box-swipe-item-bg-disabled': !(
                    Item.boxStatus == 2 || Item.boxStatus == 0
                  ),
                }"
                src="/image/airdrop/box-bg-icon.svg"
              />

              <!-- 光环 -->
              <img
                v-if="Item.boxStatus == 2 && !props.activityEnd"
                class="box-swipe-item-box-gh"
                src="/image/airdrop/box-opengh-green.svg"
              />
              <!-- 箱子 -->
              <img
                class="box-swipe-item-img"
                :style="{ opacity: Item.boxStatus == 1 ? 0.6 : 1 }"
                :src="icons[index]"
              />
              <!-- 锁 -->
              <img
                v-if="Item.boxType == 2 && Item.boxStatus == 0"
                class="box-swipe-item-box-suo"
                src="/image/airdrop/box-suo-icon.svg"
                @click="isShowLock"
              />
              <!-- BDC -->
              <div
                v-if="Item.boxStatus == 1"
                class="box-swipe-item-bdc items-center"
              >
                <img class="box-swipe-item-bdc-icon" src="/image/bdc.svg" />
                <div class="box-swipe-item-bdc-text">{{ Item.sendAmount }}</div>
                <div class="box-swipe-item-bdc-bg" />
              </div>
            </div>
            <div
              v-if="!props.activityEnd"
              class="items-center"
              :class="{
                boxOpenbtn: Item.boxStatus == 2,
                'box-swipe-item-btn': Item.boxStatus != 2,
              }"
              @click.stop="openBox(Item)"
            >
              <div class="box-swipe-item-btn-text">
                {{
                  Item.boxStatus == 1
                    ? $t("airdrop.ylq")
                    : Item.boxType == 2
                    ? $t("airdrop.jhm")
                    : "Open"
                }}
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </ClientOnly>
   
  </div>
</template>
<script setup lang="ts" name="boxSwipe">
import { onMounted } from "vue";
import { openAirdropActivityBox } from "@/api/airdrop";
import { debounce } from "@/utils";
import { showToast } from "vant";
import { Swiper, SwiperSlide } from "swiper/vue";
import "swiper/scss";

const props = withDefaults(
  defineProps<{
    centerindex?: number;
    list: any;
    activityEnd: boolean;
  }>(),
  {
    centerindex: 0,
    list: [],
    activityEnd: false,
  }
);

const emit = defineEmits(["initDone", "change", "clickItem", "clickLock"]);

const { t } = useI18n();

// 点击加锁的宝箱,展示弹窗
const isShowLock = () => {
  emit("clickLock");
};

const prefixImg = process.env.NODE_ENV != "development" ? "/fx" : "";
// 宝箱列表
const boxList = ref([]);
watch(
  () => props.list,
  (valNew) => {
    if (valNew) {
      boxList.value = valNew;
    }
  },
  {
    immediate: true,
  }
);
// 宝箱图片
const icons = ref([
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box1.png`,
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box2.png`,
  `${prefixImg}/image/airdrop/box.png`,
  `${prefixImg}/image/airdrop/box3.png`,
]);

// 初始化Swiper
const initSwiper = (val: any) => {
  console.log("Card swiper 初始化完成!");
  emit("initDone", val);
};

// swiper 滚动改变
const onSlideChange = (val: any) => {
  // console.log("slide change", val.activeIndex);
  emit("change");
};

/**
 * @description: 空投活动-开箱
 */
const openAirdropActivityBoxRequest = (val: any, call?: any) => {
  openAirdropActivityBox({
    boxId: val.boxId,
  })
    .then((res) => {
      if (res) {
        val.boxStatus = 1;
        emit("clickItem", val);
      }
    })
    .finally(() => {
      call && call();
    });
};

onMounted(() => {});
let isLxClick = false; // 是否连续点击
const openBox = debounce(
  (val: any) => {
    // console.log("--点击了宝箱--", val);
    if (val.boxStatus == 2) {
      if (val.boxType == 1) {
        if (isLxClick) {
          showToast(t("common.wlycqcxjr"));
        }
        openAirdropActivityBoxRequest(val, () => {
          isLxClick = false;
        });
        isLxClick = true;
      } else {
        emit("clickItem", val);
      }
    }
  },
  2000,
  false
);
</script>
<style lang="scss">
.boxSwipe {
  min-width: 82.5vw;
  overflow: hidden;
  position: relative;
  .box-swipe {
    &-item {
      min-height: 138 * 2px !important;
      justify-content: center !important;
      display: flex !important;
      flex-direction: column;

      &-bdc {
        position: absolute;
        top: 38 * 2px;
        left: 10 * 2px;
        width: 79 * 2px;
        z-index: 9999;
        justify-content: center;
        &-icon {
          z-index: 19;
          width: 14 * 2px;
          height: 14 * 2px;
          margin-right: 2px;
          margin-left: 3px;
        }
        &-text {
          line-height: 24 * 2px;
          position: relative;
          z-index: 9;
          text-align: center;
          color: #007bff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
        &-bg {
          position: absolute;
          top: -1px;
          left: -1px;
          width: 82 * 2px;
          height: 25 * 2px;
          background-color: #fff1a9;
          border-top: 0.5px solid #002853;
          border-bottom: 0.5px solid #002853;
        }
      }

      &-img {
        position: absolute;
        padding: 30px 30px;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 70 * 2px;
        height: 70 * 2px;
      }
      &-box {
        position: relative;
        &-gh {
          position: absolute;
          z-index: 3;
          top: 7%;
          left: 8px;
          width: 90%;
          @keyframes rotate {
            0% {
              transform: rotateZ(0);
            }
            100% {
              transform: rotateZ(720deg);
            }
          }
          animation: rotate 5s infinite linear;
        }
        &-suo {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          padding: 7 * 2px;
          z-index: 99999;
          border-radius: 100px;
          border: 3px solid #fff;

          // background: linear-gradient(180deg, rgba(255, 241, 169, 0.40) 0%, #FFF1A9 100%);
          backdrop-filter: blur(10px);
        }
      }
      &-bg {
        width: 100 * 2px;
        height: 100 * 2px;
        border-radius: 8.5 * 2px;
        background: linear-gradient(90deg, #007bff 0.34%, #00b2ff 100%);
        &-disabled {
          background: #99caff !important;
        }
      }

      &-btn {
        margin-top: 10 * 2px;
        min-width: 100 * 2px;
        max-width: 100 * 2px;
        height: 28 * 2px;
        margin-bottom: 5px;
        border-radius: 100px;
        background: #b0d1f4;
        justify-content: center;

        &-text {
          width: 90%;
          margin-left: 5%;
          text-align: center;
          line-height: 12 * 2px;
          color: #fff;
          font-size: 13 * 2px;
          font-weight: 590;
        }
      }

      &-end {
        min-height: initial !important;
      }
    }
  }
}
.boxOpenbtn {
  margin-top: 10 * 2px;
  min-width: 97 * 2px;
  max-width: 97 * 2px;
  height: 30 * 2px;

  border-radius: 97px;

  background-image: url("/image/airdrop/button-bg.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;

  div {
    font-size: 13 * 2px;
    font-weight: 590;
    text-align: center;
    color: #fff !important;
  }
}
</style>
